import 'package:base_plugin/base_plugin.dart';
import 'package:finance_app/src/common/config.dart';
import 'package:finance_app/src/widgets/style/image_style.dart';
import 'package:flutter/material.dart';

class ChatImageWatch extends StatelessWidget {
  final String url;
  final int tag;

  const ChatImageWatch({Key key, this.url, this.tag}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return PressedOpacityButton(
      onPressed: () => onNavBitmap(context),
      child: Hero(
        tag: tag ?? url,
        child: Image(
          image: Config.toImageProvider(url),
          gaplessPlayback: true,
        ),
      ),
    );
  }

  void onNavBitmap(BuildContext context) {
    if (tag == null) return;
    FocusScope.of(context).unfocus();
    Navigator.of(context).push(PageRouteBuilder(
        pageBuilder: (BuildContext context, Animation<double> animation,
                Animation<double> secondaryAnimation) =>
            AnimatedBuilder(
              animation: animation,
              builder: (BuildContext context, Widget child) => ColoredBox(
                color:
                    ColorTween(begin: Colors.transparent, end: Colors.black45)
                        .animate(animation)
                        .value,
                child: child,
              ),
              child: ChatImageWatchBitmap(
                url: url,
                tag: tag,
                closeWidget: FadeTransition(
                  opacity: animation,
                  child: CloseButton(
                    color: Colors.white,
                  ),
                ),
              ),
            )));
  }
}

class ChatImageWatchBitmap extends StatelessWidget {
  final String url;
  final int tag;
  final Widget closeWidget;

  const ChatImageWatchBitmap({Key key, this.url, this.tag, this.closeWidget})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Material(
      type: MaterialType.transparency,
      color: Colors.black45,
      child: Stack(
        alignment: Alignment.center,
        children: [
          GestureDetector(
            onTap: () {
              Navigator.of(context).pop();
            },
            child: Hero(
              tag: tag,
              child: Image(
                image: Config.toImageProvider(url),
                frameBuilder: ImageStyle.fadeInFrame,
                gaplessPlayback: true,
              ),
            ),
          ),
          Positioned(
            left: 16,
            top: MediaQuery.of(context).padding.top + 16,
            child: closeWidget,
          ),
        ],
      ),
    );
  }
}
